<template>
  <div class="bg">
    <!-- <Header class="header" /> -->
    <span class="title">DAMAGE-COMPUTE</span>
    <div class="hbg">
      <div class="dataform">
        <div class="datatitle att">
          <span class="datatext">攻击力：</span>
          <input class="input" v-model="attack" />
        </div>
        <div class="datatitle per">
          <span class="datatext">技能倍率：</span>
          <input class="input" v-model="critper" />
        </div>
        <div class="datatitle per">
          <span class="datatext">暴击伤害：</span>
          <input class="input" v-model="critattack" />
        </div>
        <div class="datatitle per">
          <span class="datatext">伤害加成：</span>
          <input class="input" v-model="elattack" />
        </div>
        <div class="datatitle per">
          <span class="datatext">增幅加成：</span>
          <input class="input" v-model="equitattack" />
        </div>
        <div class="datatitle per">
          <span class="datatext">怪物抗性：</span>
          <input class="input" v-model="kangxing" />
        </div>
      </div>
      <span class="compute">=></span>
      <span class="res">{{resl}}</span>
    </div>
  </div>
</template>

<script>
/* import Header from "../components/Header.vue"; */
export default {
  data() {
    return {
      attack: 0,
      critper: 0,
      critattack: 50,
      elattack: 0,
      equitattack: 0,
      kangxing:10,
    };
  },
  components: {},
  computed:{
    jineng(){
      return Number(this.critper * 0.01)
    },
    baoshang(){
      return Number(this.critattack * 0.01 + 1)
    },
    el(){
      return Number(this.elattack * 0.01 + 1)
    },
    zengfu(){
      return Number(this.equitattack * 0.01 + 1)
    },
    kx(){
      return Number(1 - this.kangxing * 0.01)
    },
    resl(){
      let n =Number(this.attack) * this.jineng * this.baoshang * this.el * this.zengfu * this.kx 
      n = n.toFixed(0)
      return n
    }
  }
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100vh;
  background-image: url(../assets/img/background.png);
  background-size: cover;
  background-position-y: -80px;
}
/* .header {
  position: absolute;
  height: 80px;
  width: 100vw;
} */
.title {
  position: relative;
  top: 180px;
  left: 260px;
  font-size: 30px;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    90deg,
    rgba(98, 201, 248, 0.6),
    rgba(243, 111, 255, 0.6),
    rgba(247, 129, 129, 0.6),
    rgba(241, 239, 104, 0.6),
    rgba(117, 226, 84, 0.6),
    rgba(98, 201, 248, 0.6)
  );
  background-size: 800%;
  animation: gradient 30s infinite linear;
  color: transparent;
}
.hbg {
  position: relative;
  width: 70%;
  height: 400px;
  background-color: rgba(182, 220, 235, 0.6);
  top: 200px;
  margin: 0 auto;
  border-radius: 30px;
  box-shadow: 0 0 40px rgba(58, 102, 119, 0.6);
  backdrop-filter: blur(5px);
  transition: 0.3s ease;
}
.hbg:hover{
    box-shadow: 0 0 40px rgba(98, 125, 136, 0.6);
}
.dataform {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 60%;
  width: 300px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 150px;
}
.datatitle {
  display: flex;
  flex-direction: row;
}
.datatitle .datatext {
  width: 120px;
}
/* .littlebox {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 150px;
  justify-content: space-between;
} */
.per::after{
  content:'%'
}
.att::after{
  content:'\00A0\00A0\00A0'
}
input {
  border: none;
  background: transparent;
  border-bottom: 1px solid rgba(18, 21, 32, 0.7);
  height: 25px;
  font-size: 15px;
  transition: 0.4s ease;
}
input:hover {
  transform: scale(1.1);
}
input:focus {
  outline: none;
  border-bottom: 1px solid rgba(137, 160, 245, 0.7);
  color: rgba(72, 104, 218, 0.7);
}
.compute{
  font-weight:bold;
  font-size: 40px;
  color: rgb(44, 44, 44);
  filter: brightness(150%);
  text-shadow:0 0 20px rgba(255, 255, 255, 0.7);
  position: relative;
  left: 540px;
  top: -100px;
}
.res{
  position: relative;
  font-weight: normal;
  font-size: 70px;
  left: 600px;
  top: -90px;
  color: rgba(62, 62, 63, 0.8);
}
@keyframes gradient {
    100%{
        background-position: -800% 0%;
    }
}

</style>